<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>待办事项</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "SimSun", "宋体", serif;
      }

      body {
        background-color: #f5f5f5;
        color: #333;
        line-height: 1.6;
        padding: 20px;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .todo-container {
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        width: 100%;
        max-width: 500px;
        padding: 25px;
        transition: all 0.3s ease;
      }

      .todo-header {
        text-align: center;
        margin-bottom: 25px;
      }

      .todo-title {
        color: #8a2be2;
        font-size: 2.2rem;
        margin-bottom: 5px;
      }

      .todo-subtitle {
        color: #666;
        font-size: 0.9rem;
      }

      .todo-input-container {
        display: flex;
        margin-bottom: 20px;
      }

      .todo-input {
        flex: 1;
        padding: 12px 15px;
        border: 1px solid #ddd;
        border-radius: 4px 0 0 4px;
        font-size: 1rem;
        outline: none;
        transition: border-color 0.3s;
      }

      .todo-input:focus {
        border-color: #8a2be2;
      }

      .add-btn {
        background-color: #8a2be2;
        color: white;
        border: none;
        border-radius: 0 4px 4px 0;
        padding: 0 20px;
        cursor: pointer;
        font-size: 1rem;
        transition: background-color 0.3s;
      }

      .add-btn:hover {
        background-color: #7a1bd2;
      }

      .filter-container {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
        gap: 15px;
      }

      .filter-option {
        display: flex;
        align-items: center;
        cursor: pointer;
      }

      .filter-radio {
        margin-right: 5px;
      }

      .todo-list {
        list-style: none;
        margin-bottom: 20px;
      }

      .todo-item {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #eee;
        animation: fadeIn 0.3s ease;
      }

      .todo-item:last-child {
        border-bottom: none;
      }

      .todo-checkbox {
        margin-right: 10px;
        width: 18px;
        height: 18px;
        cursor: pointer;
      }

      .todo-text {
        flex: 1;
        font-size: 1rem;
        transition: all 0.3s;
      }

      .todo-text.completed {
        text-decoration: line-through;
        color: #888;
      }

      .delete-btn {
        background: none;
        border: none;
        color: #ff4d4d;
        cursor: pointer;
        font-size: 1.1rem;
        opacity: 0.7;
        transition: opacity 0.3s;
        padding: 5px;
      }

      .delete-btn:hover {
        opacity: 1;
      }

      .todo-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.9rem;
        color: #666;
        padding-top: 15px;
        border-top: 1px solid #eee;
      }

      .empty-state {
        text-align: center;
        color: #888;
        padding: 30px 0;
        font-style: italic;
      }

      /* 动画效果 */
      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(-10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .fade-out {
        animation: fadeOut 0.3s ease forwards;
      }

      @keyframes fadeOut {
        from {
          opacity: 1;
          transform: translateX(0);
        }
        to {
          opacity: 0;
          transform: translateX(-20px);
        }
      }

      /* 响应式设计 */
      @media (max-width: 600px) {
        .todo-container {
          padding: 15px;
        }

        .todo-title {
          font-size: 1.8rem;
        }

        .filter-container {
          flex-direction: column;
          align-items: center;
          gap: 10px;
        }

        .todo-footer {
          flex-direction: column;
          gap: 10px;
          text-align: center;
        }
      }
    </style>
  </head>
  <body>
    <div class="todo-container">
      <div class="todo-header">
        <h1 class="todo-title">待办事项</h1>
        <p class="todo-subtitle">简单高效地管理你的任务</p>
      </div>

      <div class="todo-input-container">
        <input
          type="text"
          class="todo-input"
          placeholder="添加新的待办事项..."
          id="todoInput"
        />
        <button class="add-btn" id="addBtn">+ 添加</button>
      </div>

      <div class="filter-container">
        <label class="filter-option">
          <input
            type="radio"
            name="filter"
            class="filter-radio"
            value="all"
            checked
          />
          全部
        </label>
        <label class="filter-option">
          <input
            type="radio"
            name="filter"
            class="filter-radio"
            value="active"
          />
          未完成
        </label>
        <label class="filter-option">
          <input
            type="radio"
            name="filter"
            class="filter-radio"
            value="completed"
          />
          已完成
        </label>
      </div>

      <ul class="todo-list" id="todoList">
        <!-- 待办事项将在这里动态生成 -->
      </ul>

      <div class="todo-footer">
        <span id="todoCount">0个未完成, 0个总计</span>
      </div>
    </div>

    <script>
      // 待办事项类
      class TodoItem {
        constructor(id, text, completed = false) {
          this.id = id;
          this.text = text;
          this.completed = completed;
          this.createdAt = new Date();
        }

        toggle() {
          this.completed = !this.completed;
        }

        updateText(newText) {
          this.text = newText;
        }
      }

      // 待办事项管理类
      class TodoList {
        constructor() {
          this.todos = [];
          this.currentFilter = "all";
          this.loadFromStorage();
          this.render();
          this.setupEventListeners();
        }

        // 添加新待办事项
        addTodo(text) {
          if (text.trim() === "") return;

          const id = Date.now().toString();
          const newTodo = new TodoItem(id, text.trim());
          this.todos.push(newTodo);
          this.saveToStorage();
          this.render();
        }

        // 删除待办事项
        deleteTodo(id) {
          const todoElement = document.querySelector(`[data-id="${id}"]`);

          if (todoElement) {
            todoElement.classList.add("fade-out");

            setTimeout(() => {
              this.todos = this.todos.filter((todo) => todo.id !== id);
              this.saveToStorage();
              this.render();
            }, 300);
          }
        }

        // 切换待办事项完成状态
        toggleTodo(id) {
          const todo = this.todos.find((todo) => todo.id === id);
          if (todo) {
            todo.toggle();
            this.saveToStorage();
            this.render();
          }
        }

        // 过滤待办事项
        setFilter(filter) {
          this.currentFilter = filter;
          this.render();
        }

        // 获取过滤后的待办事项
        getFilteredTodos() {
          switch (this.currentFilter) {
            case "active":
              return this.todos.filter((todo) => !todo.completed);
            case "completed":
              return this.todos.filter((todo) => todo.completed);
            default:
              return this.todos;
          }
        }

        // 统计信息
        getStats() {
          const total = this.todos.length;
          const active = this.todos.filter((todo) => !todo.completed).length;
          return { total, active };
        }

        // 保存到本地存储
        saveToStorage() {
          localStorage.setItem("todos", JSON.stringify(this.todos));
        }

        // 从本地存储加载
        loadFromStorage() {
          const storedTodos = localStorage.getItem("todos");
          if (storedTodos) {
            try {
              const parsedTodos = JSON.parse(storedTodos);
              this.todos = parsedTodos.map((todoData) => {
                const todo = new TodoItem(
                  todoData.id,
                  todoData.text,
                  todoData.completed
                );
                todo.createdAt = new Date(todoData.createdAt);
                return todo;
              });
            } catch (e) {
              console.error("加载待办事项失败:", e);
              this.todos = [];
            }
          }
        }

        // 设置事件监听器
        setupEventListeners() {
          const addBtn = document.getElementById("addBtn");
          const todoInput = document.getElementById("todoInput");
          const filterRadios = document.querySelectorAll(".filter-radio");

          // 添加按钮点击事件
          addBtn.addEventListener("click", () => {
            this.addTodo(todoInput.value);
            todoInput.value = "";
            todoInput.focus();
          });

          // 输入框回车事件
          todoInput.addEventListener("keypress", (e) => {
            if (e.key === "Enter") {
              this.addTodo(todoInput.value);
              todoInput.value = "";
            }
          });

          // 过滤选项更改事件
          filterRadios.forEach((radio) => {
            radio.addEventListener("change", (e) => {
              this.setFilter(e.target.value);
            });
          });
        }

        // 渲染待办事项列表
        render() {
          const todoList = document.getElementById("todoList");
          const todoCount = document.getElementById("todoCount");
          const filteredTodos = this.getFilteredTodos();
          const stats = this.getStats();

          // 更新统计信息
          todoCount.textContent = `${stats.active}个未完成, ${stats.total}个总计`;

          // 清空列表
          todoList.innerHTML = "";

          // 如果没有待办事项，显示空状态
          if (filteredTodos.length === 0) {
            const emptyState = document.createElement("div");
            emptyState.className = "empty-state";

            if (this.todos.length === 0) {
              emptyState.textContent = "暂无待办事项，添加一个开始吧！";
            } else {
              emptyState.textContent = `没有${
                this.currentFilter === "active"
                  ? "未完成"
                  : this.currentFilter === "completed"
                  ? "已完成"
                  : ""
              }的待办事项`;
            }

            todoList.appendChild(emptyState);
            return;
          }

          // 渲染每个待办事项
          filteredTodos.forEach((todo) => {
            const todoItem = document.createElement("li");
            todoItem.className = "todo-item";
            todoItem.setAttribute("data-id", todo.id);

            todoItem.innerHTML = `
                        <input type="checkbox" class="todo-checkbox" ${
                          todo.completed ? "checked" : ""
                        }>
                        <span class="todo-text ${
                          todo.completed ? "completed" : ""
                        }">${todo.text}</span>
                        <button class="delete-btn">×</button>
                    `;

            // 添加事件监听器
            const checkbox = todoItem.querySelector(".todo-checkbox");
            const deleteBtn = todoItem.querySelector(".delete-btn");

            checkbox.addEventListener("change", () => {
              this.toggleTodo(todo.id);
            });

            deleteBtn.addEventListener("click", () => {
              this.deleteTodo(todo.id);
            });

            todoList.appendChild(todoItem);
          });
        }
      }

      // 初始化应用
      document.addEventListener("DOMContentLoaded", () => {
        new TodoList();
      });
    </script>
  </body>
</html>
